import "./index.less";
import { BasicForm, FormSchema, useForm } from "@/components/Form";
import Toolbar from "@/components/ViewComponents/Toolbar";
import { Checkbox, Col, Empty, Row } from "antd";
import { useEffect, useState } from "react";
import data from "@/views/MedicalExamination/4.30.09/data.json";
import { useTranslation } from "react-i18next";
const index = () => {
	const { t } = useTranslation();
	const en_vi = "Hospitalization.surgicalReport";
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.procedure`),
			field: "Procedure", //程序/步骤
			component: "Input"
		},
		{
			label: t(`${en_vi}.sampleName`),
			field: "SampleName", //样本名称
			component: "Input"
		},
		{
			label: t(`${en_vi}.departmentRoom`),
			field: "DepartmentRoom", //部门/房间
			component: "Input"
		},
		{
			label: t(`${en_vi}.operatingRoom`),
			field: "OperatingRoom", //手术室
			component: "Input"
		},
		{
			label: t(`${en_vi}.doctor`),
			field: "Doctor", //医生
			component: "Input"
		},
		{
			label: t(`${en_vi}.dutyCabinet`),
			field: "DutyCabinet", //值班柜
			component: "Input"
		},
		{
			label: t(`${en_vi}.officeType`),
			field: "OfficeType", //办公类型
			component: "Input"
		},
		{
			label: t(`${en_vi}.unitPrice`),
			field: "UnitPrice", //单价
			component: "Input"
		},
		{
			label: t(`${en_vi}.hospitalFee`),
			field: "HospitalFee", //医院费用
			component: "Input"
		},
		{
			label: t(`${en_vi}.content`),
			field: "Content", //内容
			component: "Input"
		},
		{
			label: t(`${en_vi}.distribution`),
			field: "Distribution", //分配/分布
			component: "Input"
		},
		{
			label: t(`${en_vi}.leadSurgeon`),
			field: "leadSurgeon", //主刀医生
			component: "Input"
		},
		{
			label: t(`${en_vi}.assistant1`),
			field: "Assistant1", //助手1
			component: "Input"
		},
		{
			label: t(`${en_vi}.assistant2`),
			field: "Assistant2", //助手2
			component: "Input"
		},
		{
			label: t(`${en_vi}.anesthesiologist`),
			field: "Anesthesiologist", //麻醉师
			component: "Input"
		},
		{
			label: t(`${en_vi}.anesthesiaTechnician`),
			field: "AnesthesiaTechnician", //麻醉技术员
			component: "Input"
		},
		{
			label: t(`${en_vi}.recovery`),
			field: "Recovery", //恢复
			component: "Input"
		},
		{
			label: t(`${en_vi}.instruments`),
			field: "Instruments", //仪器/工具
			component: "Input"
		},
		{
			label: t(`${en_vi}.total`),
			field: "Total", //总计
			component: "Input"
		}
	];
	const [register] = useForm({
		schemas,
		labelWidth: 120,
		baseColProps: {
			span: 12
		}
	});
	const [checkboxData, setCheckbox] = useState([]);
	useEffect(() => {
		setCheckbox(data);
	}, []);
	const handlerToolbarAction = (key: string) => {
		console.log(key);
	};
	return (
		<div className="page surgicalReport">
			<div className="page-content flex surgicalReport_content">
				<div className="left_form block">
					<BasicForm register={register}></BasicForm>
				</div>
				<div className="right_table block">
					<div className="checkbox">
						<div className="Group">
							<Checkbox.Group>
								<Row>
									{checkboxData.map((item: any, index: number) => {
										return (
											<Col span={24} key={index}>
												<Checkbox value={item.value}>{item.label}</Checkbox>
											</Col>
										);
									})}
								</Row>
							</Checkbox.Group>
						</div>
						{checkboxData.length === 0 ? <Empty /> : ""}
					</div>
				</div>
			</div>
			<Toolbar action={handlerToolbarAction} btnList={["add"]} />
		</div>
	);
};
export default index;
